<template>
  <view>
    <view class="top">
      <view
        style="
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @click="showCheckCity"
        >{{ city.name ? city.name : "临沂市" }}</view
      >
      <view
        style="
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @click="showCheckType"
        >{{ nowCheck }}</view
      >
    </view>
    <view style="height: 80rpx"></view>
    <!-- <uni-row :width="nvueWidth">
      <uni-col :span="8">{{ city.name ? city.name : "临沂市" }}</uni-col>
      <uni-col :span="8">
        <uni-data-select
          v-model="type"
          :clear="false"
          :localdata="typeList"
          @change="change"
        ></uni-data-select>
      </uni-col>
      <uni-col :span="8">
        <uni-data-select
          v-model="value"
          :clear="false"
          :localdata="rangeList"
          @change="change"
        ></uni-data-select>
      </uni-col>
    </uni-row> -->
    <view class="project-list">
      <view
        class="project-info"
        v-for="(item, index) in demandList"
        :key="index"
        @click="supply('demandDetails', item)"
      >
        <view class="info-left">
          <image src="@/static/image/1.jpg" />
        </view>
        <view class="info-right">
          <text
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              font-weight: 600;
            "
            >[{{ item.projectType }}]{{ item.projectName }}</text
          >
          <text class="project-detail">项目编号：{{ item.projectNo }}</text>
          <text class="project-detail">发布时间：{{ item.publishDate }}</text>
          <text class="project-detail"
            >地块面积：{{ item.landArea + item.landAreaUnit }}</text
          >
          <text class="project-detail"
            >位置：{{ item.area ? item.area : "暂无" }}</text
          >
          <text style="font-size: 14px; color: #df5500ff; font-weight: 600"
            >¥{{ item.price + item.priceUnit }}</text
          >
        </view>
      </view>
    </view>
    <check-city
      ref="selectLocation"
      :height="'90'"
      :sheight="'610'"
      @change="changeCity"
    ></check-city>
    <uni-popup ref="selectType">
      <view
        style="
          height: 600rpx;
          background-color: white;
          width: 100%;
          margin-top: -40rpx;
        "
      >
        <scroll-view
          scroll-y
          :style="{
            'margin-top': isMap ? '170rpx' : '',
            height: isMap ? '530rpx' : '600rpx',
          }"
        >
          <view
            v-for="(item, index) in type"
            :key="index"
            style="display: flex; justify-content: center"
            @click="checkType(item)"
          >
            <view
              style="
                display: flex;
                width: 90%;
                justify-content: space-between;
                height: 60rpx;
                align-items: center;
              "
            >
              <view>{{ item }}</view>
              <uni-icons
                type="checkmarkempty"
                size="24"
                v-show="nowCheck == item"
              ></uni-icons>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { api } from "@/utils/api.js";
import checkCity from "../../components/checkCity/checkCity.vue";
export default {
  components: { checkCity },
  data() {
    return {
      title: "Hello",
      city: uni.getStorageSync("nowCity"),
      value: 0,
      type: 0,
      type: [
        "全部类型",
        "农村土地承包经营权",
        "农村集体资源性资产",
        "农村经营性资产",
        "农业林权",
        "农业生产设施设备",
        "水利设施",
        "农村集体建设工程",
        "集体建设用地",
        "农村宅基地住房",
        "农业知识产权",
        "农村集体股权",
        // "涉农项目",
        "农村集体采购",
		"农村物资集中采购",
      ],
      rangeList: ["产权", "林权"],
      demandList: [],
      isMap: false,
      nowCheck: "全部类型",
      nowPage: 0,
    };
  },
  onLoad() {
    this.getDemandProjectPage(true);
    let port = uni.getSystemInfoSync().platform;
    if (port == "android" || port == "ios") {
      this.isMap = false;
    } else {
      this.isMap = true;
    }
  },
  onReachBottom() {
    this.nowPage++;
    this.getDemandProjectPage(false);
  },
  methods: {
    showCheckType() {
      this.$refs.selectLocation.close();
      this.$refs.selectType.open("top");
    },

    checkType(e) {
      this.nowCheck = e;
      this.nowPage = 0;
      this.$refs.selectType.close();
      this.getDemandProjectPage(true);
    },
    changeCity(e) {
      this.city = e;
      this.nowPage = 0;
      this.getDemandProjectPage(true);
    },
    showCheckCity() {
      this.$refs.selectLocation.open("top");
    },
    async getDemandProjectPage(e) {
      let nowCheck = "";
      switch (this.nowCheck) {
        case "全部类型":
          nowCheck = "";
          break;
        case "农村土地承包经营权":
          nowCheck = "0";
          break;
        case "农村集体资源性资产":
          nowCheck = "1";
          break;
        case "农村经营性资产":
          nowCheck = "2";
          break;
        case "农业林权":
          nowCheck = "3";
          break;
        case "农业生产设施设备":
          nowCheck = "4";
          break;
        case "水利设施":
          nowCheck = "5";
          break;
        case "农村集体建设工程":
          nowCheck = "6";
          break;
        case "集体建设用地":
          nowCheck = "7";
          break;
        case "农村宅基地住房":
          nowCheck = "8";
          break;
        case "农业知识产权":
          nowCheck = "9";
          break;
        case "农村集体股权":
          nowCheck = "10";
          break;
        // case "涉农项目":
        //   nowCheck = "11";
        //   break;
        case "农村集体采购":
          nowCheck = "12";
          break;     
		case "农村物资集中采购":
          nowCheck = "14";
          break;
        default:
          break;
      }
      let res = await api.getDemandProjectPage({
        pageNum: this.nowPage,
        pageSize: 10,
        areaId: this.city.id,
        level: this.city.level,
        projectTypeCode: nowCheck,
      });
      if (e) {
        this.demandList = res.data.rows;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      } else {
        this.demandList = [...this.demandList, ...res.data.rows];
      }
    },
    supply(e, a) {
      uni.navigateTo({
        url: "/pages/" + e + "/" + e + "?data=" + JSON.stringify(a),
      });
    },
  },
};
</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 80rpx;
  z-index: 1000;
  background-color: white;
  box-shadow: 0px 2px 2px #e5e5e580;
  display: flex;
  flex-direction: row;
  position: fixed;
  align-items: center;
}
.project-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .project-info {
    width: 92%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    .info-left {
      image {
        width: 220rpx;
        height: 300rpx;
        border-radius: 10rpx;
      }
    }
    .info-right {
      width: 470rpx;
      margin-left: 8rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .project-detail {
        font-size: 28rpx;
        color: #303030;
      }
    }
  }
}
</style>
